<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除图书</title>
    <script src="./js/jquery-2.1.0.js"></script>
    <style>
        body {
            background: url("./img/bj4.png") no-repeat;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin: 0;
            padding: 20px;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table, th, td {
            border: 1px solid #ccc;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<h2>图书删除</h2>
<table id="Booktable">
    <thead>
    <tr>
        <th>图书ID</th>
        <th>书名</th>
        <th>价格</th>
        <th>出版社</th>
        <th>作者</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="bookList">
    <!--  由后端传来数据  -->
    </tbody>
</table>
<button type="button" onclick="btn()">返回</button>

<script>
    <!--添加-->
    function del(e) {
        var msg = "您确定要删除吗？";
        if (confirm(msg)==true){
            var row = $(e).closest("tr");
            //获取书名
            var bname = row.find("td:eq(1)").text();
            $.ajax({
                type: "GET",
                url: "/api/book/delBook",
                data: {
                    "bname": bname
                },
                dataType: "JSON",
                success: function (bookresult) {
                    console.log(bookresult)
                    if (bookresult.code == 20000) {
                        alert(bookresult.msg);
                        // 刷新页面
                        location.reload();
                    } else {
                        alert(bookresult.msg);
                    }
                }
            });
            return true;
        }else{
            return false;
        }

    }

    <!--页面加载事件 -->
    $(function () {
        //获取图书列表
        $.ajax({
            type: "GET",
            url: "/api/book/bookList",
            data: {},
            dataType: "JSON",
            success: function (bookresult) {
                console.log(bookresult);
                var bookList = bookresult.data;
                if (bookresult.code == 20000) {
                    var tbody = document.getElementById("bookList");
                    bookList.forEach(function (books) {
                        var row = document.createElement("tr");
                        row.innerHTML = `
                            <td>${books.bid}</td>
                            <td>${books.bname}</td>
                            <td>${books.price}</td>
                            <td>${books.press}</td>
                            <td>${books.author}</td>
                            <td><button type="submit" onclick="del(this)">删除</button></td>
                    `;
                        tbody.appendChild(row);
                    })
                }
            }
        })
    });

    <!-- 跳转首页 -->
    function btn() {
        location.assign("menu.html");
    }
</script>
</body>
</html>